<template>
  <div class="repair-page">
    <div class="container">
      <h1>职工反馈管理</h1>
      <el-table border :data="tableData" stripe style="width: 100%">
        <el-table-column prop="order_id" label="报修单号">
          <template #default="scope">
            <p>{{ scope.row.order_id? scope.row.order_id : '--' }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="user_id" label="用户ID" />
        <el-table-column prop="name" label="名字" />
        <el-table-column prop="mobile" label="联系方式" />
        <el-table-column prop="content" label="反馈内容" />
        <el-table-column prop="create_time_text" label="反馈时间" />
        <el-table-column prop="status_text" label="状态" />

        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="scope.row.status === 0"
              type="primary"
              size="small"
              @click="handleClick(scope.row._id)"
            >
              处理
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDeleteClick(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <el-dialog v-model="showDialog" title="处理反馈" width="500">
        <el-input
          v-model="adviceResult"
          :rows="4"
          type="textarea"
          placeholder="请输入处理结果"
        />

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handleDialogCancel">取消</el-button>
            <el-button type="primary" @click="handleDialogConfirm">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const tableData = ref([]);
const totalNum = ref(0);
const currentPage = ref(1);
const pageSize = ref(5);
const showDialog = ref(false);
const adviceResult = ref("");
const updateId = ref("");

const statusMap = {
  0: "未处理",
  1: "已处理",
};

const getTableData = async () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    role: 1,
  };

  const { data } = await axios.post("/get_advice_all_list", params);

  if (typeof data === "object") {
    const { result, total } = data;

    tableData.value = result.map((item) => {
      const { status, create_time } = item;
      return {
        ...item,
        status_text: statusMap[status],
        create_time_text: dayjs(create_time).format("YYYY-MM-DD HH:mm:ss"),
      };
    });
    totalNum.value = total;
  } else {
    ElMessage.error("服务端异常");
  }

  console.log(data);
};


const handleSizeChange = (value) => {
  pageSize.value = value;

  getTableData();
};

const handleCurrentChange = (value) => {
  currentPage.value = value;

  getTableData();
};

const handleClick = (_id) => {
  showDialog.value = true;
  updateId.value = _id;
};

const handleDialogCancel = () => {
  showDialog.value = false;
  updateId.value = "";
  adviceResult.value = "";
};

const handleDialogConfirm = async () => {
  if (!adviceResult.value) {
    ElMessage.error("请输入内容");
    return;
  }

  const params = {
    _id: updateId.value,
    result: adviceResult.value,
  };

  const { data } = await axios.post("/handle_advice_result", params);

  if (data === "success") {
    ElMessage.success("处理成功");
    handleDialogCancel();
    getTableData();
  } else {
    ElMessage.error("服务端异常");
  }
};

const handleDeleteClick = async (_id) => {
  if (!_id) {
    ElMessage.error("数据异常");
    return;
  }
  const params = {
    _id,
  };

  const { data } = await axios.post("/delete_advice", params);

  if (data === "success") {
    ElMessage.success("删除成功");
    getTableData();
  } else {
    ElMessage.error("服务端异常");
  }
};

getTableData();
</script>

<style scoped>
.repair-page {
  width: 100%;
}

.container {
  width: 95%;
  margin: 0 auto;
  padding: 30px;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 40px;
}

.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>